import React,{useState,useReducer} from 'react'
import Meals from './components/Meals'
import Mycontext from './components/Context/context'
import Search from './components/Search/search';
import Cart from './components/Cart/cart';

import './APP.css'
const carDatareducer=(carData,action)=>{
  const newCart = { ...carData };
  switch(action.type){
    case 'ADD':
      if (newCart.items.indexOf(action.meal) === -1) {
        newCart.items.push(action.meal);    
        action.meal.amount = 1
      } else {
        action.meal.amount += 1;
      }
      newCart.totalAmount += 1;
      newCart.totalPrice += action.meal.price
     return newCart
    case 'SUB': 
    action.meal.amount-=1
    if(action.meal.amount===0){
      newCart.items.splice(newCart.items.indexOf(action.meal),1)
    }
    newCart.totalAmount -= 1;
    newCart.totalPrice -= action.meal.price
    return newCart
    case 'CLEAR': 
    newCart.items.forEach(item=>{
      item.amount=0
    })
    newCart.items=[]
    newCart.totalAmount=0
    newCart.totalPrice=0
    return newCart
    default:
    return carData
  }
  
}
export default function App(){
  const mealData = [
    {
        id: '1',
        title: '汉堡包',
        desc: '百分百纯牛肉配搭爽脆酸瓜洋葱粒与美味番茄酱经典滋味让你无法抵挡！',
        price: 12,
        img: '/img/meals/1.png'
    },
    {
        id: '2',
        title: '双层吉士汉堡',
        desc: '百分百纯牛肉与双层香软芝，加上松软面包及美味酱料，诱惑无人能挡！',
        price: 20,
        img: '/img/meals/2.png'
    },
    {
        id: '3',
        title: '巨无霸',
        desc: '两块百分百纯牛肉，搭配生菜、洋葱等新鲜食材，口感丰富，极致美味！',
        price: 24,
        img: '/img/meals/3.png'
    }, {
        id: '4',
        title: '麦辣鸡腿汉堡',
        desc: '金黄脆辣的外皮，鲜嫩幼滑的鸡腿肉，多重滋味，一次打动您挑剔的味蕾！',
        price: 21,
        img: '/img/meals/4.png'
    }, {
        id: '5',
        title: '板烧鸡腿堡',
        desc: '原块去骨鸡排嫩滑多汁，与翠绿新鲜的生菜和香浓烧鸡酱搭配，口感丰富！',
        price: 22,
        img: '/img/meals/5.png'
    }, {
        id: '6',
        title: '麦香鸡',
        desc: '清脆爽口的生菜，金黄酥脆的鸡肉。营养配搭，好滋味的健康选择！',
        price: 14,
        img: '/img/meals/6.png'
    }, {
        id: '7',
        title: '吉士汉堡包',
        desc: '百分百纯牛肉与香软芝士融为一体配合美味番茄醬丰富口感一咬即刻涌现！',
        price: 12,
        img: '/img/meals/7.png'
    }
];
    const[mealsData,setmealsData]=useState(mealData)
    // const[carData,setcarData]=useState({
    //   items:[],
    //   totalAmount:0,
    //   totalPrice:0,
      
    // })

    const[carData,carDatadispatch]=useReducer(carDatareducer,{
        items:[],
        totalAmount:0,
        totalPrice:0,
      })
      
    // const addItem = (meal) => {
    //   carDatadispatch({type:'ADD',meal:meal})
      // 对购物车进行复制
      // const newCart = { ...carData };
      // // 判断购物车中是否有商品
      // if (newCart.items.indexOf(meal) === -1) {
      //   // 将meal添加进购物车中
      //   newCart.items.push(meal);
      //   // 修改商品数量
      //   meal.amount = 1
      // } else {
      //   // 增加商品数量
      // //   meal.amount += 1;
      // }
      // // 增加总数
      // newCart.totalAmount += 1;
      // // 增加总金额
      // newCart.totalPrice += meal.price
      // setcarData(newCart)
    // }
   

    // const removeItem=(meal)=>{
    //   carDatadispatch({type:'SUB'})
    //   const newCart = { ...carData };
    //   meal.amount-=1
    //   if(meal.amount===0){
    //     newCart.items.splice(newCart.items.indexOf(meal),1)
    //   }
    //   newCart.totalAmount -= 1;
    //   newCart.totalPrice -= meal.price
    //   setcarData(newCart)
    // }
    
    const filterItem=(keyword)=>{
    
       const newmealsData=mealsData.filter(item=>{
           return item.title.indexOf(keyword)!==-1
        })
        if(newmealsData.length!==0&&keyword){
            setmealsData(newmealsData)
        }else{
          setmealsData(mealData)
        }
      
    }
    // const clearItem=()=>{
    //   carDatadispatch({type:'CLEAR'})
    //   const newCart = { ...carData }
    //   newCart.items.forEach(item=>{
    //     item.amount=0
    //   })
    //   newCart.items=[]
    //   newCart.totalAmount=0
    //   newCart.totalPrice=0
    //   setcarData(newCart)
    //   }
    return (
    <Mycontext.Provider value={{...carData,carDatadispatch}}>
      <div className='app' style={{width:'100%',height:'21rem'}}>
      <Search filterItem={filterItem}></Search>
     <Meals mealsData={mealsData}/>
     <Cart></Cart>
     
      </div>
      </Mycontext.Provider>
    )
  }

